<template>
  <div>
    <el-table
       @current-change="handleCurrentChange"
       @selection-change="handleSelectionChange"
       :header-row-class-name='headerRowClassName'
      :height= height
      :empty-text='emptyText'
      :border='true'
      :show-header='showHeader'
      :stripe='isStripe'
      :row-class-name='rowClasName'
      :data="tableData"
      :highlight-current-row = isSelectOnly
      :size='size'
      :default-sort='defaultSort'
       style="width: 100%">
        <el-table-column
          v-if="isMuti"
          type="selection"
          width="55"
        >
        </el-table-column>
      <el-table-column
        v-for="(item,index) in tableConfigArr"
        :width= item.width
        :key= index
        :fixed = item.fixed
        :prop = item.prop
        :label = item.label>
         <slot :name="item.prop" :data="item">
         </slot>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
/*
height 该表格的高度 如果高度有值 则会固定表头
fixed 该列是否固定
data  表格数据源
prop  该列对应的字段名
label 该列的列名
width 该列的宽度
isMuti 如果為true則表格為多選 如果為false 表格為單選
isStripe 表格是否为斑马纹
size Table 的尺寸    medium / small / mini
show-header 是否显示表头
highlight-current-row 是否要高亮当前选择行
row-class-name 行的className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
empty-text 空数据时显示的文本内容，也可以通过 slot="empty" 设置
default-sort 默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序Object order:ascending, descending如果只指定了prop,没有指定order,则默认顺序是ascending
*/
export default {
  props: {
    tableConfigArr: {
      type: Array,
      require: true
    },
    height: {
      type: String,
      default: '484'
    },
    width: {
      type: String,
      default: null
    },
    isSelectOnly: {
      type: Boolean,
      default: true
    },
    isMuti: {
      type: Boolean,
      default: false
    },
    isStripe: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'medium'
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    rowClasName: {
      type: String || Function,
      default: ''
    },
    emptyText: {
      type: String,
      default: '表格数据为空'
    },
    defaultSort: {
      type: Object
    },
    headerRowClassName: {
      type: String,
      default: 'header'
    }
  },
  data () {
    return {
      tableData: []
    }
  },
  created () {
    this.getList({'page': 1, 'size': 10})
  },
  methods: {
    getList (obj) {
      this.$axios.post('/json', obj, {
        'Content-Type': 'application/x-www-form-urlencoded'
      }).then((res) => {
        this.tableData = res.data.data
        this.$emit('dataChange', {page: obj.page, size: obj.size, total: res.data.total})
      }).catch((err) => {
        throw err
      })
    },
    handleCurrentChange (e) {
      this.$emit('selectedList', e)
    },
    handleSelectionChange (e) {
      this.$emit('selectedMuti', e)
    }
  }
}
</script>

<style scoped>

</style>
